<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>17_事件-绑定事件参数传递</title>
  <!-- 
  在 Vue 中，事件绑定时可以向事件处理函数传递参数。这种功能使得处理事件时能够更灵活地使用数据。
  1. 基本语法

  在 Vue 中，可以通过在事件处理函数中使用小括号  `()`  来传递参数。例如：
  <button @click="handleClick('Hello, Vue!')">点击我</button>
  在这个例子中，当按钮被点击时， `handleClick`  方法将接收到字符串  `'Hello, Vue!'`  作为参数。

  2. 传递事件对象

  除了自定义参数外，Vue 还可以将原生事件对象作为参数传递给事件处理函数。可以通过在参数列表中添加  `$event`  来实现：
  <button @click="handleClick($event, 'Hello, Vue!')">点击我</button>
  在这个例子中， `handleClick`  方法将接收到两个参数：原生事件对象和字符串  `'Hello, Vue!'` 。

  3. 示例

  以下是一个完整的示例，演示如何传递参数给事件处理函数：
  <template>
    <div>
      <button @click="handleClick($event, 'Hello, Vue!')">点击我</button>
      <p>{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: '',
      };
    },
    methods: {
      handleClick(event, customMessage) {
        this.message = customMessage;
        console.log(event); // 输出事件对象
      },
    },
  };
  </script>
  在这个示例中，点击按钮会将  `message`  更新为  `'Hello, Vue!'` ，并在控制台输出事件对象。

  4. 使用数组传递多个参数

  如果需要传递多个参数，可以使用数组语法：
  <button @click="handleClick(...['Hello', 'Vue!'])">点击我</button>
  5. 注意事项

  - 性能考虑：在模板中直接传递参数时，可能会导致每次渲染都创建新的函数。如果需要优化性能，可以考虑使用计算属性或方法返回函数来进行事件处理。
  - 事件修饰符：仍然可以使用事件修饰符（如  `.stop` 、 `.prevent`  等）与参数传递结合使用。

  总结

  - 参数传递：可以通过小括号  `()`  在事件处理函数中传递自定义参数。
  - 事件对象：可以使用  `$event`  参数传递原生事件对象。
  - 数组传递：可以使用数组语法传递多个参数。
  - 性能考虑：注意性能问题，尽量避免在模板中直接创建新函数。
  -->
</head>
<body>

  <div id="app">
    <h3>1. 默认传递event对象</h3>
    <button @click="handleClick1">默认传递event对象</button>

    <h3>2. 自己的参数</h3>
    <button @click="handleClick2('myParam', message)">只传递自己的参数</button>

    <h3>3. 自己的参数和event对象, 在模板中想要明确的获取event对象: $event</h3>
    <button @click="handleClick3('myParam', $event)">传递自己的参数和event对象</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1. 创建Vue实例
    const { createApp, ref } = Vue

    const app = createApp({
      setup() {
        const message = ref('Hello, Vue!')

        const handleClick1 = (event) => {
          console.log(event)
        }

        const handleClick2 = (param, param2) => {
          console.log(param, param2)
        }

        const handleClick3 = (param, event) => {
          console.log(param, event)
        }

        return {
          message,
          handleClick1,
          handleClick2,
          handleClick3
        }
      }
    })

    app.mount('#app')

  </script>
  
</body>
</html>